import React, {FC, useEffect, useState} from "react";
import {message, Popconfirm, Table, Tooltip} from "antd";
import api from "../../../api";
import {inject, observer} from "_mobx-react@6.3.1@mobx-react";
import {Link} from "react-router-dom";
import BreadcrumbPath from "../../../components/BreadcrumbPath";

const AnnouncementList: FC<any> = ({MobxData}) => {
    const [dataSource, setDataSource] = useState<Array<any>>([]);
    const {announcementList, getAnnouncementList} = MobxData;

    useEffect(() => {
        getAnnouncementList();
    }, [])
    useEffect(() => {
        // 拼装表格数据
        setDataSource(announcementList.map((item: any) => ({
            key: item._id,
            title: item.title,
            time: new Date(parseInt(item.time)).toLocaleString(),
            username: item.username,
            oldContent: item.content,
            content: item.content.replace(/<\/?.+?>/g, "")  //去除html标签
        })))
    }, [announcementList])

    const columns = [
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title',
            width: 'auto',
            render: (text: string, record: any) => {
                return <Link
                    to={`/main/announcement/announcementDetails?title=${record.title}&time=${record.time}&username=${record.username}&content=${record.oldContent}`}>{text}</Link>
            }
        },
        {
            title: '发布时间',
            dataIndex: 'time',
            key: 'time',
            width: 'auto',
        },
        {
            title: '发布人',
            dataIndex: 'username',
            key: 'username',
            width: 'auto',
        },
        {
            title: '内容',
            dataIndex: 'content',
            key: 'content',
            width: 'auto',
            ellipsis: {
                showTitle: false,
            },
            render: (content: any) => (
                <Tooltip placement="topLeft" title={content}>
                    {content}
                </Tooltip>
            ),
        },
        {
            title: '操作',
            key: 'action',
            width: '100px',
            render: (text: any, record: any, index: any) => {
                return (
                    <div style={{color: "#409eff"}}>
                        <Popconfirm
                            title="确定要删除吗?"
                            onConfirm={() => {
                                // console.log("删除", record.key);
                                // 删除公告
                                api.delAnnouncements({id: record.key}).then(res => {
                                    message.success(res.msg);
                                }).catch(err => {
                                    message.error(err);
                                })
                                getAnnouncementList();
                            }}
                            okText="确定"
                            cancelText="取消"
                        >
                            <span style={{margin: "0 10px", cursor: "pointer"}}>删除</span>
                        </Popconfirm>
                    </div>
                )
            }
        }
    ];

    return (
        <div>
            {/*<h1>公告列表</h1>*/}
            <BreadcrumbPath/>
            <Table dataSource={dataSource} columns={columns} sticky
                   pagination={{
                       pageSize: 8,
                       hideOnSinglePage: true,
                       responsive: true,
                       position: ["bottomCenter"],
                       showQuickJumper: true
                   }}/>
        </div>
    )
}
export default inject('MobxData')(observer(AnnouncementList));